const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
	// 入口文件
	entry: {
		// 起步
		// start: "./src/start/index.js",

		// 资源管理
		// management: "./src/management/index.js"

		// 管理输出
		// app: "./src/output/index.js",
		// print: "./src/output/print.js"

		// 使用webpack-dev-server
		myserver: "./src/Tree-Shaking/index.js"
	},
	// 将 dist 目录下的文件，作为可访问文件
	devServer: {
		contentBase: "./dist"
	},
	devtool: "inline-source-map",
	plugins: [
		// new CleanWebpackPlugin(['dist']),
		new HtmlWebpackPlugin({
			title: "使用HtmlWebpackPlugin"
		}),
		// 精简输出
		new UglifyJSPlugin()
	],
	output: {
		filename: "bundle.js",

		// 起步
		// path: path.resolve(__dirname, "dist/start-01")

		// 资源管理
		path: path.resolve(__dirname, "dist/Tree-Shaking-05")

		// 管理输出
		// filename: "[name].bundle.js",
		// path: path.resolve(__dirname, 'dist/output-03')
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [
					"style-loader",
					"css-loader"
				]
			},
			{
				test: /\.(png|svg|jpg|gif)$/,
				use: [
					"file-loader"
				]
			}

		]
	}
}